<template>
  <div>
    <van-search
      v-model="value"
      show-action
      :label="selVal"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
    <template #left-icon>
        <div @click="onSearch" class="allAddress">
          <van-icon name="arrow-down" />
          <span>|</span>
          <van-icon name="search" />
        </div>
      </template>
      <template #action>
        <div @click="onMap">
          <van-icon name="location-o" size="0.66rem" color="#fff" />
        </div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { cityNameApi } from '@/api'
export default {
  data () {
    return {
      value: '',
      selVal: '上海'
    }
  },
  async created () {
    const res = await cityNameApi({ name: this.selVal })
    // console.log(res)
    localStorage.setItem('hkzf_city', JSON.stringify(res.data.body))
    if (localStorage.getItem('sel_city')) {
      this.selVal = JSON.parse(localStorage.getItem('sel_city')).label
      localStorage.removeItem('hkzf_city')
    }
  },
  methods: {
    onSearch () {
      this.$router.push({
        path: '/city',
        query: {
          city: this.selVal
        }
      })
    },
    onMap () {
      this.$router.push({
        path: '/map'

      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-search--show-action {
  background-color: rgba(0, 0, 0, 0);
}
.allAddress{
  display: flex;
  margin-right: 15px;
  i{
    display: inline-block;
  }
  .van-icon:first-child{
    margin-right: 15px;
  }
  .van-icon:last-child{
    margin-left: 15px;
  }
}
/deep/.van-search__action:active{
  background-color: transparent;
}
</style>
